<script setup>
import '@/assets/js/china.js'
import * as echarts from "echarts"
import {onMounted, ref, watch} from "vue";
import {getYYMMDD} from "@/utils/useDayjs"

const map_cn = ref()
const props = defineProps({
  redTideNews: {
    type: Object,
    default: () => ({})
  },
  redTideDistribution: {
    type: Array,
    default: () => []
  }
})
const option = ref({
  title: {
    text: '我国赤潮近期分布情况',
    subtext: '',
    x: 'left'
  },
  tooltip: {
    trigger: 'item'
  },
  //左侧小导航图标
  visualMap: {
    show: true,
    x: 'left',
    y: 'bottom',//bottom
    textStyle: {
      fontSize: 8
    },
    splitList: [{
      start: 1,
      end: 9
    },
      {
        start: 10,
        end: 99
      },
      {
        start: 100,
        end: 999
      },
      {
        start: 1000,
        end: 9999
      },
      {
        start: 10000
      }
    ],
    color: ['#8A3310', '#C64918', '#E55B25', '#F2AD92', '#F9DCD1']
  },

  //配置属性
  series: [{
    name: '累积赤潮情况',
    type: 'map',
    mapType: 'china',
    roam: false,//拖动和缩放
    itemStyle: {
      normal: {
        borderWidth: .5,//区域边框宽度5
        borderColor: '#009fe8',//区域边框颜色
        areaColor: '#ffefd5',//区域颜色
      },
      emphasis: {//鼠标滑过地图高亮的相关设置
        borderWidth: .5,//5
        borderColor: '#4b0082',
        areaColor: '#fff'
      }
    },
    label: {
      normal: {
        show: true, //省份名称
        fontSize: 8
      },
      emphasis: {
        show: true,
        fontSize: 8
      }
    },
    data: [] //数据
  }]
})
onMounted(() => {
  //初始化echarts实例
  let ec_center = echarts.init(map_cn.value, "dark");
  let myData = [{'name': '上海', 'value': 261}, {'name': '云南', 'value': 363}, {'name': '广东', 'value': 1024},
    {'name': '黑龙江', 'value': 543}, {'name': '青海', 'value': 487}, {'name': '南海诸岛', 'value': 903}]//data=myData
  watch(props, () => {
    option.value.series[0].data = props.redTideDistribution.map(item => ({name: item.province, value: item.frequency}))
    ec_center.setOption(option.value);
  })
  //使用制定的配置项和数据显示图表
  ec_center.setOption(option.value);

})
</script>

<template>
  <section class="content-center">
    <div class="content-center1" id="content-center1">
      <h2>海洋赤潮监测</h2>
      <h3>我国近期海洋赤潮爆发情况</h3>
      <div class="sea-rank">
        <span>预期风险等级：</span>
        <span>{{ redTideNews.rank }}</span>
      </div>
      <div class="sea-position">
        <span>预期海域：</span>
        <span>{{ redTideNews.sea }}</span>
      </div>
      <div class="sea-time">
        <span>预期时间：</span>
        <span>{{ getYYMMDD(redTideNews.time, "YYYY年MM月DD日") }}</span>
      </div>
    </div>
    <div class="content-center2" ref="map_cn"></div>
  </section>
</template>

<style scoped>
.content-center {
  height: 600px;
}

.content-center1 {
  height: 30%;
  color: white;
}

.content-center1 > h2 {
  text-align: center;
}

.content-center1 > h3 {
  text-align: left;
}

.sea-rank > span {
  left: 15px;
}

.sea-rank > span:nth-child(2) {
  color: red;
}

.content-center2 {
  height: 70%;
}

@media screen and (max-width: 2000px) {
  .content-center1 {
    /*position:absolute;*/
    height: 30%;
    /*border:1px solid white;*/
    color: white;
    background: #100C2A;
    padding-bottom: 20px; /**/
    padding-left: 20px;
  }

  .content-center1 > div {
    padding-bottom: 5px;
  }
}
</style>
<!--2024/2/2 13:11-->